import React, { Component } from 'react'
import { RightOutlined, CloseOutlined} from '@ant-design/icons';
import { Divider } from 'antd';
import './ShoppingCart.css'
import sub from '../../imgs/index/sub.png'
import add from '../../imgs/index/add.png'
import {numToFloat} from '../../utils/NumUtil'

const iconStyle = {
    color: '#fff',
    fontSize : '15px'
  };

export default class ShoppingCart extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
            subtotal:0,
            serviceCharge:0,
            total:0
        }
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
        let subtotal=0
        let total=0
        for (let [key, value] of this.props.shopping) {
            subtotal += Number.parseInt(key.price)*value
            total=Number.parseInt(subtotal)
           }
           this.setState({subtotal,total})
    }

    render() {
        return (
            <div className="shopping">
                <div className="shopping-header">
                    <div className="shopping-header-text">购物车</div>
                </div>
                <div className="goods-group">
                    <div className="goods-group-no-goods" style={{display: this.props.shopping.size<=0 ? "" : "none"}}>
                        <div >
                            <div className="goods-group-no-goods-text1">购物车竟然是空的</div>
                            <div className="goods-group-no-goods-text2">再忙，也要记得买点东西犒赏自己~</div>
                        </div>
                    </div>

                    <div className="goods-group-goods" style={{display: this.props.shopping.size<=0 ? "none" : ""}}>
                        {[...this.props.shopping.keys()].map((item,index)=>{
                            return  <div className="goods-group-goods-card" key={index}>
                                        <div className="goods-group-goods-card-info">
                                            <div className="goods-group-goods-card-info-img">
                                                <img className="goods-group-goods-card-img" src={item.img} alt=""></img>
                                            </div>
                                            <div className="goods-group-goods-card-handle">
                                                <div className="goods-group-goods-card-handle-text">{item.name}</div>
                                                <div className="goods-add-sub">
                                                    <div className="goods-handle"><img className="goods-handle-img" src={sub} alt="" onClick={()=>this.props._sub(item)}/></div>
                                                    <div className="goods-num">{this.props.shopping.get(item)}</div>
                                                    <div className="goods-handle"><img className="goods-handle-img" src={add} alt="" onClick={()=>this.props._add(item)}/></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="goods-group-goods-card-right">
                                            <div className="goods-group-goods-card-right-price">
                                                <div className="goods-group-goods-card-price">{item.price}￥</div>
                                            </div>
                                        </div>
                                        <div>
                                            <div className="goods-group-goods-delete" onClick={()=>this.props._delete(item)}>
                                                <CloseOutlined />
                                            </div>
                                        </div>
                                    </div>
                        })}
                    </div>
                </div>
                <div className="shopping-info">
                    <Divider />
                    <div className="shopping-info-item" >
                        <div className="shopping-info-item-text">小计:</div>
                        <div className="shopping-info-item-price">{numToFloat(this.state.subtotal)} ￥</div>
                    </div>
                    <div className="shopping-info-item">
                        <div className="shopping-info-item-text">外送费:</div>
                        <div className="shopping-info-item-price">{numToFloat(this.state.serviceCharge)} ￥</div>
                    </div>
                    <div className="shopping-info-item">
                        <div className="shopping-info-item-text">合计:</div>
                        <div className="shopping-info-item-price">{numToFloat(this.state.total)} ￥</div>
                    </div>
                    <Divider />
                </div>
                <div className="shopping-order">
                    <div className="shopping-order-button">
                        <div className="shopping-order-button-text">进入结算</div>
                        <div><RightOutlined style={iconStyle}/></div>
                    </div>
                </div>
                <div className="shopping-care">
                    <div>提醒：根据您购买的商品，都以收到的实物为准，平台暂不支持退货验货投诉 = =</div>
                </div>
            </div>
        )
    }
}
